<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        *{
            margin:20px;
        }
        .demo1{
            width:100%;
            height:50px;
            background-color: aquamarine;
        }
        .box1{
            padding: 5px;
            background-color: aqua;
        }
        .box2{
            padding: 5px;
            background-color:brown;
        }
        .demo5{
            background-color: saddlebrown;
        }
        
        ul{
            width: 200px;
            height: 100px;
            overflow:scroll;
        }

        li{
            width: 200px;
            height: 50px;
            background-color: bisque;
        }

    </style>
</head>
<body>
    <!-- 
        总结：
        事件行为：
            1.prevent 阻止元素的默认行为
            2.stop 阻止事件冒泡
            3.once 只触发一次
            4.capture 在捕获阶段触发事件 而不是在冒泡阶段触发
            5.self 当前元素的target为自身时候才可以触发事件
            6.passive 不用等待事件的回调，直接执行默认事件
     -->
    <div id="root">
        <h1>welcome to {{name}} school</h1>
        <!-- 1.prevent 阻止元素的默认行为 -->
        <a href="https://www.baidu.com" @click.prevent="stopskip">百度一下，你就知道</a>
        <!-- 2.stop 阻止事件冒泡 -->
        <div class="demo1" @click="stopskip">
            <button @click.stop="stopskip">确认如此</button>
        </div>
        <!-- 事件只触发一次 -->
        <button @click.once="stopskip">确认如此</button>
        <!-- capture 在捕获阶段触发事件 而不是在冒泡阶段触发 由原本输出2-1 变为 1-2-->
        <div class="box1" @click.capture="showmsg(1)">
            div1
            <div class="box2" @click="showmsg(2)">
                div2
            </div>
        </div>

        <!-- self 当前元素的target为自身时候才可以触发事件   以下案例只有元素是div的情况下才触发stopskip -->
         <!-- 某种程度来说可以解决事件冒泡 -->
        <div class="demo5" @click.self="stopskip"> 
            <button @click="stopskip">确认如此</button>
        </div>
        
        <!-- passive 不用等待事件的回调，直接执行默认事件 -->
        <ul @wheel.passive="showNumber">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>
<script>
    new Vue({
       el:'#root',
       data:{
          name:'shilaike'
       },
       methods:{
          stopskip(event){
            //event.preventDefault(); 阻止元素的默认行为
            //event.stopPropagation(); 阻止事件的冒泡行为
            alert("点击成功");
          },
          showmsg(msg){
            console.log(msg);
          },
          showNumber(){
            for (let i = 0; i < 10000; i++) {
                console.log("#");
            }
          }
       }
    })
</script>
</html>